<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
    <title>actors</title>
<script src="../js/jquery-1.12.3.min.js"></script>
<link rel="stylesheet" href="/SSM3/css/bootstrap.min.css">
<link rel="stylesheet" href="/SSM3/css/jquery.bootgrid.min.css">
<script src="/SSM3/js/bootstrap.min.js"></script>
<script src="/SSM3/js/jquery.bootgrid.min.js"></script>
<script type="text/javascript" src="/SSM3/js/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" href="/SSM3/css/bootstrap-datetimepicker.min.css" type="text/css"></link>
  </head>
  <body>
  <div class="container">
  	<div class="row">
  		<div class="col-md-12">
  		<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Mysql sakila database</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">单表查询<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="showactor">actor</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">跨表查询<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="country_city">country和city</a></li>
          	<li><a href="chinacity">查询中国的city</a></li>
          </ul>
        </li>
        <li><a href="fileupload">fileupload</a></li>
        <li><a href="logout">logout</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
  		</div>
  	</div>
  	<div class="row">
  		<div class="col-md-12">
  		<h2>actor表的信息</h2>
  		<a class="btn btn-primary" href="exportactor">导出数据为excel</a>
  		<a class="btn btn-primary" href="#" id="add">添加学生</a>
  		<a class="btn btn-primary" href="#" id="zidingyi" onclick="aaa()">自定义</a>
  		<div class="btn-group">
		  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    查看接口数据 <span class="caret"></span>
		  </button>
		  <ul class="dropdown-menu">
		    <li><a href="/SSM2/listActorsXml?current=1&rowCount=10" target="_blank">XML</a></li>
		    <li><a href="/SSM2/actors?current=1&rowCount=10" target="_blank">JSON</a></li>
		  </ul>
		</div>
  		<table id="grid-data" class="table table-condensed table-hover table-striped">
        <thead>
            <tr>
                <th data-column-id="c_id"  data-identifier="true" data-type="numeric">ID</th>
                <th data-column-id="c_name">姓名</th>
                <th data-column-id="c_birthday" data-formatter="c_birthday">出生日期</th>
                <th data-column-id="c_address" data-order="desc">籍贯</th>
                <th data-column-id="commands" data-formatter="commands" data-sortable="false">操作</th>
            </tr>
        </thead>
    </table>
  		</div>
  	</div>
  	
  	
  	
  </div>
<script>
/* 加载表中所有信息 */
$(document).ready(function(){
    var grid =$("#grid-data").bootgrid({
    ajax:true,
    url:"actors",
    ajaxSettings: {
        method: "GET",
    },
    navigation:2,
        formatters: {
        "commands": function(column,row)
        {
        	return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.c_id + "\">编辑<span class=\"glyphicon glyphicon-pencil\"></span></button> "+ 
           " <button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.c_id + "\">删除<span class=\"glyphicon glyphicon-pencil\"></span></button>  "
            ; 
        },
        "c_birthday":function (column,row){
        	 var birthday = new Date(row.c_birthday); 
          var birthday = birthday.getFullYear()+"/"+(birthday.getMonth()+1)+"/"+birthday.getDate() ;
          return birthday ;
        }
    	}
    }).on("loaded.rs.jquery.bootgrid", function()
	{
    /* Executes after data is loaded and rendered */
    
	    grid.find(".command-edit").on("click", function(e)
	    {
	        $(".actormodal").modal();
	        //往编辑框中回写数据的ajax请求
	        $.get("actors/"+$(this).data("row-id"),function(str){
	        	var birthday = new Date(str.obj.c_birthday); 
	            var birthdaystr = birthday.getFullYear()+"/"+(birthday.getMonth()+1)+"/"+birthday.getDate() ;
	            
	        	$("#fname").val(str.obj.c_name);
	        	$("#lname").val(str.obj.c_address);
	        	$("#lupdate").val(birthdaystr);
	        	$("#actorid").val(str.obj.c_id);
	        });
	    }).end().find(".command-delete").on("click", function(e)
		    {
		        $.get("deletectors/"+$(this).data("row-id"),function(){
		        	alert("删除成功");
		        	$("#grid-data").bootgrid("reload");
		        });
		    });
  	});
  });
 
  $(document).ready(function(){
  		$("#add").click(function(){
  	 		$(".addmodal").modal();
  	 	});
  	 	$("#zidingyi").click(function (){
  	 		$.ajax({
  	 			/* 自定义 */
  	 			url:"custom",
  	 		data:{username:'刘健君',password:123456},
  	 		async:false,
  	 		type:'get',
  	 		dataType:'text',
  	 		sucess:function (callback){
  	 			alert("正确");
  	 		},
  	 		error:function (){
  	 			alert("出错");
  	 		}
  	 		});
  	 	});
  	 	 $("#lupdate").datetimepicker({
  	 	 format: 'yyyy-mm-dd',
  	 	 autoclose: true
  	 	 });
  	 	 $("#lupdate").datetimepicker('setStartDate', '2012-01-01');
  	 	 
  	 	 $("#lupdate2").datetimepicker({
  	 	 format: 'yyyy-mm-dd',
  	 	 autoclose: true
  	 	 });
  	 	 $("#lupdate2").datetimepicker('setStartDate', '2012-01-01');
  	 	 
  	 	 
  });
  
  </script>
<!--   修改模块 -->
  <div class="modal fade actormodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">修改学生</h4>
      </div>
      <form id="form1" method="post">
      <div class="modal-body">
        <div class="form-group">
    		<label for="fname">姓名</label>
    		<input type="text" name="first_name" class="form-control" id="fname">
  		</div>
        <div class="form-group">
    		<label for="lname">籍贯</label>
    		<input type="text" name="last_name" class="form-control" id="lname">
  		</div>
  		<div class="form-group ">
    		<label for="lupdate">出生日期</label>
    		<input type="text" name="last_update" class="form-control" id="lupdate">
    		<input type="hidden" id="actorid" name="id" />
  		</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="update">修改</button>
      </div>
      </form>
    </div>
  </div>
</div>
<!-- 增加模块 -->
  <div class="modal fade addmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">增加学生</h4>
      </div>
      <form id="form2" method="post">
      <div class="modal-body">
        <div class="form-group">
    		<label for="fname">姓名</label>
    		<input type="text" name="first_name" class="form-control" id="fname2">
  		</div>
        <div class="form-group">
    		<label for="lname">籍贯</label>
    		<input type="text" name="last_name" class="form-control" id="lname2">
  		</div>
  		<div class="form-group">
    		<label for="lupdate">出生日期</label>
    		<input type="text" name="last_update" class="form-control" id="lupdate2">
    		<input type="hidden" id="actorid" name="id2" />
  		</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="addactor">添加</button>
      </div>
      </form>
    </div>
  </div>
</div>
  </body>
</html>
<script>
/*修改信息的板块*/
 $(document).ready(function(){
 	$("#update").click(function(){
 		var json={"c_id":$("#actorid").val(),"c_name":$("#fname").val(),"c_address":$("#lname").val(),"c_birthday":$("#lupdate").val()};
			$.ajax({
		        url:"actors/"+$("#actorid").val(),
		        type:"PUT",
		        data:JSON.stringify(json),
		        dataType: 'json',  
            	contentType:'application/json;charset=UTF-8', //contentType很重要     
		        success: function(data) {
			        $(".actormodal").modal('hide');
		 			alert("更新成功");
		 			location.reload();
			    }      
		});
 		
 	});
 	
 	/* 添加信息的ajax板块 */
 	$("#addactor").click(function(){
 		$.post("actors",$("#form2").serialize(),function(a){
 			$(".addmodal").modal('hide');
 			alert("添加成功");
 			location.reload();
 		});
 		var json={"c_name":$("#fname2").val(),"c_address":$("#lname2").val(),"c_birthday":$("#lupdate2").val()};
			$.ajax({
		        url:"actors",
		        type:"POST",
		        data:JSON.stringify(json),
		        dataType: 'json',  
            	contentType:'application/json;charset=UTF-8', //contentType很重要     
		        success: function(data) {
			        $(".addmodal").modal('hide');
		 			alert("添加成功");
		 			location.reload();
			    }      
 		});	
 		
 	});	
 
 });
</script>